require('./Tickclock.styl');
import urllist from 'clientConfig/urllist';
const net = require('clientConfig/util/net');
const classNames = require('classnames');
import { Boxs, Button, Toast } from 'saltui';
let HBox = Boxs.HBox;
let Box = Boxs.Box;
class Tickclock extends React.Component {
    static defaultProps = { tel: '' }
    constructor(props) {
        super(props);
        this.state = {
            click: false,//按钮是否选中
            content: '获取验证码'
        };
    }
    handleClick(options) {
        if (!this.props.tel) {
            // alert('手机号码不能为空');
            Toast.show({
                type: 'error',
                content: '手机号码不能为空'
            });
            return;
        }else{
            if (!(/^1[3|4|5|8|7][0-9]\d{4,8}$/.test(this.props.tel))) {
                Toast.show({
                    type: 'error',
                    content: '手机格式不对'
                });
                return;
            }
        }  
        // this.setState(prevState=>({click:!prevState.click}));
        this.setState({ click: true });
        this.getcode();
        let t = 30;
        this.clear = () => {
            clearInterval(this.timer);
            this.setState({ content: '重新获取' });
            this.setState(prevState => ({ click: !prevState.click }));
        }
        this.timer = setInterval(
            () => {
                t--;
                this.setState({ content: t + 's' });
                if (t == 0) {
                    this.clear();
                }
            },
            1000);
    }
    getcode() {
        let url = urllist.getverifycode + "?tel=" + this.props.tel;
        net.fetchUrl(url, { method: 'post' }).then((jsondata) => {
            // alert(JSON.stringify(jsondata))
            console.log(JSON.stringify(jsondata))
            if (jsondata.errcode == 0) {
                Toast.show({
                    type: 'success',
                    content: '发送成功'
                });
                this.clear();
            } else if (jsondata.errcode == 1) {
                if ((jsondata.errmsg).includes('触发业务流控')) {
                    Toast.show({
                        type: 'error',
                        content: '操作过于频繁'
                    });
                }
            } else if (jsondata.errcode == 4002) {
                Toast.show({
                    type: 'error',
                    content: '手机号错误'
                });
            }
        });
    }
    render() {
        let t = this;
        return (
            <div className="tickclock">
                <Button disabled={this.state.click} className={classNames('t-FAR btn-styl', { 'vercode': t.state.click })} type="text" onClick={t.handleClick.bind(t)}>{t.state.content}</Button>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

module.exports = Tickclock;
